<template>
  <div class="kaohebiao">
    <statistic-query-form ref="queryForm"
                          @doQuery="getList"
                          :data-uri="'/kh/statistic/scoreInfo/'"
                          :pattern="1"
                          :dept-type="2"
                          :export-uri="'/kh/statistic/scoreInfoExport/'"
    ></statistic-query-form>
    <p class="titlekao"><b>企业领导班子年度考核得分表</b> </p>
    <el-table
      :data="tableData"
      v-loading="loading"
      style="width: 95%;margin-left: 20px"
      border
      :span-method="objectSpanMethod">
      <el-table-column
        prop="scorelevel"
        align="center"
        label="考核项目与权重">
      </el-table-column>
      <el-table-column
        prop="assesser"
        align="center"
        label="考评对象">
      </el-table-column>
      <el-table-column :label="item.title"  align="center" v-for="item in hangname">
        <el-table-column
          v-for="row in item.headItems"
          :prop="row.prop"
          align="center"
          :label="row.label">
        </el-table-column>

      </el-table-column>

    </el-table>

  </div>
</template>

<script>
  import request from '@/utils/request'
  import StatisticQueryForm from '../components/StatisticQueryForm'
  export default {
    name: "Login",
    data() {
      return {
        loading:false,
        //表头
        hangname:[
          {tltlename:'九鑫公司',
            xxarr:[
              {xingming:'考核人1',prop:'kaohe'},
              {xingming:'考核人2',prop:'name1'},
              {xingming:'考核人3',prop:'xiaoji'},
            ]
          },
        ],
        //总数居
        tableData: [
          {
            danwei: '40%',
            duixiang: '张三',
            name1: '20',
            xiaoji:'10',
            kaohe:10
          },
          {
            danwei: '40%',
            duixiang: '张三1',
            name1: '20',
            xiaoji:'10',
            kaohe:10
          },
          {
            danwei: '40%',
            duixiang: '张三2',
            name1: '20',
            xiaoji:'10',
            kaohe:10
          },
          {
            danwei: '20%',
            duixiang: '李四',
            name1: '20',
            xiaoji:'10',
            kaohe:10
          },
        ],

        spanArr:[],
        pos:'',

      };
    },
    components:{
      'StatisticQueryForm': StatisticQueryForm
    },
    created() {

    },
    methods: {
      //获取列表数据
      getList:function(obj) {
        this.spanArr=[]
        request({
          url: obj.url,
          method: 'get',
        }).then(response => {
          this.hangname = response.data.heads
          this.tableData = response.data.body
          this.getSpanArr( this.tableData)


        });
      },

      getSpanArr(data) {
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            this.spanArr.push(1);
            this.pos = 0
          } else {
            // 判断当前元素与上一个元素是否相同  inAccessCode（批次字段）
            if (data[i].scorelevel === data[i - 1].scorelevel) {
              this.spanArr[this.pos] += 1;
              this.spanArr.push(0);
            } else {
              this.spanArr.push(1);
              this.pos = i;
            }
          }
        }
      },
      //进行表格合并
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      },
    }
  };
</script>

<style  lang="scss">
  .kaohebiao .tablestyle {
    border: 1px solid #cccccc;
    color: #606266;
    font-size: 15px;
    width: 95%;
    margin-left: 20px;
    th{
      height: 36px;
    }

  }
  .kaohebiao .tablestyle td {
    height: 34px;
    text-align: center;
  }
  .kaohebiao .titlekao {
    margin-top: 20px;
    display: flex;
    font-size: 20px;
    align-items: center;
    justify-content: center;

  }
</style>
